<template>
  <!--新增产品线-->
  <el-dialog
    :close-on-click-modal="false"
    title="编辑"
    :visible.sync="dialogVisible"
    @close="handleClose"
    width="450px"
  >
    <el-form
      size="mini"
      label-width="100px"
      :model="form"
      ref="ruleForm"
      :rules="rules"
    >
      <el-form-item label="产品线:">
        <span>{{ form.categoryName }}</span>
      </el-form-item>
      <el-form-item label="人员:" prop="chargeUserIds">
        <el-select
          v-model="form.chargeUserIds"
          multiple
          filterable
          clearable
          :loading="salesmanLoading"
        >
          <el-option
            v-for="item in salesMenberList"
            :key="item.userId"
            :value="item.userId"
            :label="item.userName"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="参考最低价:">
          <el-input type="number" clearable v-model="form.categoryMinPrice" placeholder="请输入参考最低价" style="width: 50%;"></el-input>
          <span style="color: red;font-size:10px;">元/吨</span>
        </el-form-item>
        <el-form-item label="参考最高价:">
          <el-input type="number" clearable v-model="form.categoryMaxPrice" placeholder="请输入参考最高价" style="width: 50%;"></el-input>
          <span style="color: red;font-size:10px;">元/吨</span>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose" size="small">取 消</el-button>
      <el-button
        type="primary"
        @click="handleConfirm"
        :loading="btnLoading"
        size="small"
        >确认</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import { editGoodsLineAPI } from "@/api/allInLine/goods.js";
// import { salesmanList } from "@/api/allInLine/inquiry.js";
import {getOrderUsersList} from '@/api/partner'
import { Message } from "element-ui";
const defaultListQuery = {
  glId:'',
  categoryMaxPrice: '',
  categoryMinPrice: '',
  categoryName: '',
  chargeUserIds: [],
}
export default {
  name: "editTeamSetup",
  data() {
    return {
      form:JSON.parse(JSON.stringify(defaultListQuery)) ,
      dialogVisible: false,
      btnLoading: false,
      // 人员列表
      salesMenberList: [],
      salesmanLoading: false,
      rules: {
        chargeUserIds: [
          { required: true, message: "人员名称不能为空", trigger: ["change"] },
        ],
      },
    };
  },
  computed: {},
  created() {
  },
  methods: {
    // 获取人员列表
    async getSalesMemberList() {
      this.salesmanLoading = true;
      // const res = await salesmanList({ departmentType: "purchase" });
      const res = await getOrderUsersList();
      this.salesmanLoading = false;
      this.salesMenberList = res;
    },
    // 确认提交
    handleConfirm() {
      const data = JSON.parse(JSON.stringify(this.form));
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          editGoodsLineAPI(data)
            .then((res) => {
              Message.success("产品线编辑成功");
              this.btnLoading = false;
              this.handleClose();
              this.$emit("update");
            })
            .catch((err) => {
              this.btnLoading = false;
            });
        }
      });
    },
    // 打开弹框
    showPop(item) {
      this.getSalesMemberList();
      this.dialogVisible = true
      for (let key in defaultListQuery) {
        this.form[key]=item[key]?item[key]:defaultListQuery[key]
      }
      this.form.chargeUserIds = this.form.chargeUserIds.map((item) => +item)
    },
    // 关闭弹框
    handleClose() {
      this.dialogVisible = false;
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

<style  lang="scss">
</style>
